<template>
	<view class="flex-col page">

		<view class="mt-98 flex-col group">
			<view class="flex-col">
				<view class="flex-col items-center self-stretch">
					<image class="image_2" src="/static/image/logo-1.jpg" />

				</view>
			</view>
			<view class="flex-col group_2">
				<view class="flex-row self-stretch group_6">
					<image class="self-center image_5" src="../../static/icons/keys.png" />
					<u-input placeholder="请输入旧密码" type="password" v-model="loginForm.oldPassword"></u-input>
				</view>
				<view class="flex-row self-stretch group_6">
					<image class="self-center image_5" src="../../static/icons/keys.png" />
					<u-input placeholder="请输入新密码" type="password" v-model="loginForm.newPassword"></u-input>
				</view>
				<view class="flex-row items-center self-stretch group_7">
					<image class="image_5" src="../../static/icons/keys.png" />
					<u-input placeholder="请输入确认密码" type="password" v-model="loginForm.rePassword"></u-input>
				</view>

			</view>
			<view class="flex-col group_8">
				<view class="flex-col justify-start items-start self-stretch text-wrapper_2" @click="save">
					<text class="text_8">修改密码</text>
				</view>

			</view>
		</view>
		<u-toast ref="utoast"></u-toast>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				tips: "发送验证码",
				loginForm: {},
				submited: false,
			};
		},

		methods: {
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			save() {

				if (this.submited) {
					return;
				}
				this.submited = true;
				if (!this.loginForm.oldPassword) {
					this.submited = false;
					uni.$u.toast('请输入旧密码');
					return;
				}
				if (!this.loginForm.newPassword) {
					this.submited = false;
					uni.$u.toast('请输入新密码');
					return;
				}
				if (!this.loginForm.rePassword) {
					this.submited = false;
					uni.$u.toast('请输入密码');
					return;
				}
				if (this.loginForm.rePassword != this.loginForm.newPassword) {
					this.submited = false;
					uni.$u.toast('两次输入的密码不一致');
					return;
				}
 

				this.$put({
					url: `${this.$Utils.ApiUrl}/password/mine`,
					data: this.loginForm
				}).then(res => {
					this.$refs.utoast.show({
						message: "密码修改成功",
						complete() {
							uni.navigateBack()
						}
					})
				}).catch((err) => {
					console.log(err)
					this.submited = false;
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			goLogin() {
				uni.redirectTo({
					url: '/pages-publics/login/login'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.mt-9 {
		margin-top: 15.7rpx;
	}

	.ml-13 {
		margin-left: 22.67rpx;
	}

	.mt-19 {
		margin-top: 33.14rpx;
	}

	.page {
		padding-bottom: 118.6rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.group {
			padding: 0 97.67rpx;

			.image_2 {
				width: 174.42rpx;
				height: 174.42rpx;
			}

			.image_3 {
				border-radius: 87.21rpx;
				width: 174.42rpx;
				height: 174.42rpx;
			}

			.font {
				font-size: 28.42rpx;
				font-family: SourceHanSansCN;
				line-height: 22.6rpx;
				color: #888888;
			}

			.text {
				color: #5e5555;
				line-height: 22.45rpx;
			}

			.group_2 {
				margin-top: 66.28rpx;

				.group_3 {
					padding: 0 12.21rpx 13.95rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_2 {
						line-height: 22.57rpx;
					}
				}

				.group_4 {
					padding: 26.16rpx 12.21rpx 13.95rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_3 {
						line-height: 22.53rpx;
					}
				}

				.image_4 {
					width: 34.88rpx;
					height: 34.88rpx;
				}

				.group_5 {
					padding: 24.42rpx 8.72rpx 17.44rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text-wrapper {
						margin-right: 8.72rpx;
						padding: 6.98rpx 0 10.47rpx;
						background-color: #00baad;
						border-radius: 17.44rpx;
						height: 41.86rpx;

						.text_4 {
							margin-left: 13.95rpx;
							margin-right: 3.49rpx;
							color: #ffffff;
							line-height: 22.71rpx;
						}
					}
				}

				.group_6 {
					padding: 26.16rpx 5.23rpx 6.98rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_5 {
						line-height: 22.69rpx;
					}
				}

				.image_5 {
					width: 41.86rpx;
					height: 41.86rpx;
				}

				.group_7 {
					padding: 26.16rpx 8.72rpx 17.44rpx;
					border-bottom: solid 1.74rpx #a6a6a6;

					.text_6 {
						line-height: 22.73rpx;
					}
				}

				.text_7 {
					margin-left: 76.74rpx;
					margin-top: 31.4rpx;
					color: #808080;
					line-height: 22.59rpx;
				}
			}

			.group_8 {
				margin-top: 94.19rpx;
				padding: 0 59.3rpx;

				.text-wrapper_2 {
					padding: 20.95rpx 10.47rpx;
					background-color: #ff0101;
					border-radius: 32.16rpx;

					.text_8 {
						margin-left: 170.93rpx;
						color: #ffffff;
						font-size: 28.42rpx;
						font-family: SourceHanSansCN;
						line-height: 29.65rpx;

					}
				}

				.text_9 {
					color: #ff0101;
					line-height: 22.83rpx;
				}
			}
		}
	}
</style>